<template>
  <div class="container">
    <el-row class="searchInputWidth">
      <el-form :inline="true" :model="filterField" ref="listForm">
        <el-form-item label="项目名称" class="row-padding-bottom">
          <el-input
            v-model="filterField.projectName"
            placeholder="请输入项目名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="专户账号" class="row-padding-bottom">
          <el-input
            v-model="filterField.account"
            placeholder="请输入专户账号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="专户银行" class="row-padding-bottom">
          <el-select
            v-model="filterField.bankId"
            filterable
            placeholder="请选择专户银行"
            clearable
          >
            <el-option
              v-for="item in bankOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="icon iconfont iconchazhao1"
            @click="searchTable"
            class="commonBtn"
          />
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 列表 -->
    <el-table
      :data="tableList"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      highlight-current-row
      stripe
      v-loading="loading"
      style="border: 1px solid #dfe6ec"
    >
      <el-table-column align="center" prop="projectName" label="项目名称" />
      <el-table-column align="center" prop="bankName" label="专户银行" />
      <el-table-column align="center" label="专户账号">
        <template slot-scope="scope">
          <span v-if="scope.row.account">{{
            scope.row.account.replace(
              /^([\s\S]{3})[\s\S]*?([\s\S]{3})$/,
              '$1**** ****$2'
            )
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拨付比例">
        <template slot-scope="scope">
          <span v-if="scope.row.scale">{{ scope.row.scale }}%</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="typeDesc"
        label="拨付周期"
        :formatter="formatTd"
      />
      <el-table-column
        align="center"
        prop="shouldDisburse"
        label="应拨付总额(万元)"
        :formatter="formatTd"
      />
      <el-table-column
        align="center"
        prop="realDisburse"
        label="已拨付总额(万元)"
        :formatter="formatTd"
      />
      <el-table-column align="left" label="操作" width="180px" fixed="right">
        <template slot-scope="scope">
          <el-link
            type="primary"
            v-if="isShowDetail"
            @click="onDetail(scope.row.id)"
            >查看计划</el-link
          >
          <span v-else>--</span>
        </template>
      </el-table-column>
      <!-- 表格数据为空时，页面显示 -->
      <div slot="empty" v-show="isEmpty">
        <emptyTable emptyText="暂无相关信息" />
      </div>
    </el-table>
    <!-- filterField为搜索条件 -->
    <Pagination
      ref="pagination"
      @getList="getTableList"
      :filterField="filterField"
      :requestUrl="requestUrl"
    />
    <allocatedPlanDetail ref="planDetail" @refresh-data="searchTable" />
  </div>
</template>

<script>
import allocatedPlanDetail from '@/components/specialAccount/allocatedPlanDetail'
export default {
  name: 'allocatedPlanList',
  components: {
    allocatedPlanDetail,
  },
  data() {
    return {
      requestUrl: 'api-acc/account/expand/disbursepage',
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        projectName: '',
        account: '',
        bankId: '',
      },
      tableList: [],
      loading: false,
      isEmpty: false,
      dialogVisible: false,
      dialogTitle: '',
      isSaveLoading: false,
      bankOptions: [],
      isShowDetail: '',
    }
  },
  created() {
    this.getBank()
    // this.getBursetype();
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('accountList:detail') > -1
  },
  methods: {
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isEmpty = true
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    searchTable() {
      this.loading = true
      this.$refs.pagination.getTableListData()
    },
    onDetail(accountId) {
      this.$refs.planDetail.showPlanDetail(accountId)
    },
    getBank() {
      var data = {
        type: 'BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      })
        .then((response) => {
          this.bankOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
  },
}
</script>

<style lang="less" scoped>
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .searchInputWidth /deep/.el-form-item__label {
    width: 82px;
  }
}
.form-item {
  width: 300px;
}
</style>
